<template>
	<view class="list">
		<view class="item" v-for="item in _this.list">
			<view class="status">出售中</view>
			<view class="cover">
				<image :src="item.product_cover"></image>
				<!-- <view class="label">#101010</view> -->
			</view>
			<view class="name">{{item.product_name}}</view>
			<view class="cell_view">
				<view class="cell">完成交易价格: ${{item.price}}</view>
				<view class="cell">完成交易时间: {{item.created_at}}</view>
			</view>
			<view class="item_foot">
				<view class="price">${{item.price}}</view>
				<view class="btn cancel" @click="cancel(item.id)">取消出售</view>
			</view>
		</view>
		<uv-load-more :status="_this.loadmore_status" line @loadmore="loadmore" />

		<uv-popup ref="popupRef" round="10" bgColor="none">
			<Cancel :id="props_id" @close="popupRef.close" @reload="reload" />
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		orderLists
	} from "@/request/api";
	import Cancel from "@/components/my/Cancel.vue";
	import {
		ref,
		shallowRef
	} from "vue";
	import useList from "@/hooks/useList.js";
	const {
		_this
	} = useList();
	const getList = async () => {
		let data = {
			page: _this.page,
			limit: _this.limit,
			is_sell: 1
		};
		let {
			list
		} = await orderLists(data);
		_this.last_page = list.last_page;
		list = list.list;
		_this.list = _this.page == 1 ? list : [..._this.list, ...list];
		_this.loadmore_status = _this.last_page == _this.page ? 'nomore' : 'loadmore';
	};
	getList();

	const loadmore = () => {
		if (_this.page >= _this.last_page) return;
		_this.page++;
		getList();
	};

	const popupRef = shallowRef();
	const props_id = ref("");
	const cancel = (id) => {
		props_id.value = id;
		popupRef.value.open("center");
	};
	const reload = () => {
		popupRef.value.close();
		_this.list = [];
		_this.page = 1;
		getList();
	};
	defineExpose({
		loadmore
	});
</script>

<style scoped lang="scss">
	.list {
		box-sizing: border-box;

		.item {
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
			background: #2E2E2E;
			position: relative;

			.status {
				width: 110rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				color: #000000;
				font-size: 24rpx;
				border-radius: 20rpx 0rpx 0rpx 20rpx;
				background: #DDF247;
				position: absolute;
				right: 0;
				top: 40rpx;
				z-index: 2;

				&.end {
					color: #000000;
					background: #FFFFFF;
				}
			}

			.cover {
				border-radius: 10rpx;
				background: #444444;
				overflow: hidden;
				position: relative;

				image {
					width: 650rpx;
					height: 650rpx;
				}

				.label {
					height: 32rpx;
					line-height: 32rpx;
					color: #FFFFFF;
					font-size: 20rpx;
					font-weight: 400;
					border-radius: 5rpx;
					padding: 0 12rpx;
					box-sizing: border-box;
					background: rgba(255, 255, 255, 0.1);
					position: absolute;
					left: 20rpx;
					bottom: 20rpx;
					z-index: 2;
				}
			}

			.name {
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: 800;
				padding-top: 30rpx;
				padding-bottom: 18rpx;
				padding-left: 10rpx;
				box-sizing: border-box;
			}

			.cell_view {
				padding: 10rpx;
				box-sizing: border-box;

				.cell {
					color: #999999;
					font-size: 30rpx;
					padding-bottom: 20rpx;
					box-sizing: border-box;
				}
			}

			.item_foot {
				padding: 0 10rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.price {
					color: #DDF247;
					font-size: 30rpx;
					padding-top: 10rpx;
					box-sizing: border-box;
				}

				.btn {
					width: 200rpx;
					height: 78rpx;
					line-height: 78rpx;
					text-align: center;
					color: #111111;
					font-size: 28rpx;
					font-weight: bold;
					border-radius: 20rpx;
					background: #DDF247;

					&.cancel {
						color: #CCCCCC;
						background: #444444;
					}
				}
			}
		}
	}
</style>